<template>
  <div>
    <a style="color:cadetblue;font-size: 25px; top: 50px;">养殖信息</a> <el-button @click="updateorAdd()">设置</el-button>
 <hr>
 <table width="1000px">
  <tr>
    <td>品种{{ breedhtml.varietyName }}</td>
    <td>来源{{ breedhtml.breedcome }}</td>
  </tr>
  <tr>
    <td>饲养天数{{ breedhtml.breedDay }}</td>
    <td>饲养品牌{{ breedhtml.fodderbrand }}</td>
  </tr>
  <tr>
    <td>饲养负责人{{  breedhtml.fodderName}}</td>
    <td>出栏日期{{ breedhtml. columnTime}}</td>
  </tr>
 </table>
  </div>
<div style="margin-top: 100px;">
  <a style="color:cadetblue;font-size: 25px;">保健信息</a> <el-button @click="AddThey()">新增行</el-button>
 <hr>
 <el-table :data="breedhtml.vaccione" style="width: 800px" show-borderd="false">
    <el-table-column prop="rearDay" label="饲养天数"   />
    <el-table-column prop="healThcareMode" label="免疫方式" />
    <el-table-column prop="healthcareMethod" label="免疫方法" />
    <el-table-column prop="address" label="操作" >
      <template #default="{row}">
        <a>修改</a>
        <a>删除</a>
      </template>
    </el-table-column>
  </el-table>
  <div  v-if="from_.get==1">
    <el-input v-model="from_.rearDay"  style="width: 200px;"/>
    <el-input v-model="from_.healThcareMode"  style="width: 200px;"/>
    <el-input v-model="from_.healthcareMethod" style="width: 200px;"/>
    <el-button @click="VinoneAdd()">保存</el-button>
    <el-button>取消</el-button>
  </div>
  <div  v-else="from_.get==0">
  </div>
</div>
<div style="margin-top: 100px;">
  <a style="color:cadetblue;font-size: 25px;" >动检证</a>
 <hr>
 <table>
  <tr>
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.startinspection" style="width: 100%;">
      <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.getimages,item.productionimagesid)"></el-button>
  <img style="width: 150px;height: 150px;" class="buttonss" :src="item.getimages" > 
     </div>
      <el-button  list-type="picture-card" @click="GETimages()" style="width: 120px;height: 120px;">
     <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
 </table>
</div>
<div style="margin-top: 100px;">
  <a style="color:cadetblue;font-size: 25px;">企业信息</a> <el-button @click="ProDction()" >设置</el-button>
 <hr>
 <table width="1000px">
  <tr>
    <td>养殖场{{ breedhtml.farm }}</td>
    <td>负责人{{ breedhtml.farmName }}</td>
  </tr>
  <tr>
    <td>存栏数量：只{{ breedhtml.framnum }}</td>
  </tr>
 </table>
</div>
<div style="margin-top: 100px;" >
  <a style="color:cadetblue;font-size: 25px;">企业照片</a>
 <hr>
 <table >
  <tr style="width: 1000px;">
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.breedingenterprise" style="width: 100%;">
          <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.getimagest,item.productionimagesid)"></el-button>
        <img style="width: 150px;height: 150px;" class="buttonss" :src="item.getimagest" > 
     </div>
      <el-button  list-type="picture-card" @click="GETimagest()" style="width: 120px;height: 120px;">
  <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
 </table>
</div>
<el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form"    ref="ruleFormRef"
    style="max-width: 600px"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="品种" :label-width="formLabelWidth" prop="varietyName">
        <el-input v-model="form.varietyName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="来源" :label-width="formLabelWidth" prop="breedcome">
        <el-input v-model="form.breedcome" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养天数" :label-width="formLabelWidth" prop="breedDay">
        <el-input v-model="form.breedDay" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养品牌" :label-width="formLabelWidth" prop="fodderbrand">
        <el-input v-model="form.fodderbrand" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养负责人" :label-width="formLabelWidth" prop="fodderName">
        <el-input v-model="form.fodderName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="出栏日期" :label-width="formLabelWidth" prop="columnTime">
        <el-col :span="11">
        <el-date-picker
          v-model="form.columnTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      </el-form-item>
   
      <!-- <el-upload
    class="avatar-uploader"
    action="https://localhost:7116/api/SourceController1/GETimages"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="form.proDuctionImages" :src="form.proDuctionImages" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
        <el-button type="primary" @click="resetForm(ruleFormRef)">
        取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisibles" title="Shipping address" width="500">
    <el-form :model="from_"    ref="ruleFormRef"
    style="max-width: 600px"
    :rules="ruless"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="养殖场" :label-width="formLabelWidth" prop="farm">
        <el-input v-model="from_.farm" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth" prop="farmName">
        <el-input v-model="from_.farmName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="存栏数量" :label-width="formLabelWidth" prop="framnum">
        <el-input v-model="from_.framnum" autocomplete="off" />
      </el-form-item>

   
      <!-- <el-upload
    class="avatar-uploader"
    action="https://localhost:7116/api/SourceController1/GETimages"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="form.proDuctionImages" :src="form.proDuctionImages" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForms(ruleFormRef)">添加</el-button>
        <el-button type="primary" @click="resetForm(ruleFormRef)">
        取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisibless" title="添加图片" width="500">
            <el-form :model="form">   
              <el-upload
              class="avatar-uploader"
              action="https://localhost:7116/api/SourceController1/GETimages"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.iamges" :src="form.iamges" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="getLeadingCommentRanges()">确认</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  取消
                </el-button>
                  </div>
                </template>
              </el-dialog>

              <el-dialog v-model="dialogFormVisibleone" title="添加图片" width="500">
            <el-form :model="form">   
              <el-upload
              class="avatar-uploader"
              action="https://localhost:7116/api/SourceController1/GETimages"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.iamges" :src="form.iamges" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="getLeadingCommentONe()">确认</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  取消
                </el-button>
                  </div>
                </template>
              </el-dialog>



</template>
<script lang="ts" setup>
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
  import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter,useRoute } from 'vue-router';
const route=useRoute()
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
const router=useRouter();
const dialogFormVisibles = ref(false)
const dialogFormVisible = ref(false)
const dialogFormVisiblet = ref(false)
const dialogFormVisibless = ref(false)
const dialogFormVisibleone = ref(false)
const formLabelWidth = '140px'
const form=reactive({
  varietyName: "",
  breedcome: "",
  breedDay: 0,
  fodderbrand: "",
  fodderName: "",
  columnTime: "",
  proDuctionBasicid: 0,
  iamges:'',
  imageget:'',
})
const from_=reactive({
  farm: "",
  farmName: "",
  framnum: 0,
  proDuctionBasicid: 0,
  get:0,
  vaccioneMessid: 0,
  rearDay: 0,
  healThcareMode: "",
  healthcareMethod: "",
})
onMounted(()=>{

  breedhtmls()
open()

})

const open=(()=>{

  let gh= route.query.id

if(Number(gh)==2)
{
  breedhtmls()
  updateorAdd()
} if(Number(gh)==3)
{
  breedhtmls()
  ProDction()
}

})



const breedhtml=ref([])
const breedhtmls=(()=>{
  var  proDuctionBasicid=localStorage.getItem('Details');
  axios.post('https://localhost:7116/api/FarmingController1/Breedingcompany',{
    proDuctionBasicid: Number(proDuctionBasicid)
  }).then(res=>{

      breedhtml.value=res.data.data
      console.log(res.data.data,'zzzzzzzzzz')
  })

})


const rules = reactive({
  varietyName: [
    { required: true, message: '下拉框未选择', trigger: 'blur' },
  ],
  breedcome: [
    {
      required: true,
      message: '品种不能为空',
      trigger: 'change',
    },
  ],
  breedDay: [
    {
      required: true,
      message: '天数不能为空',
      trigger: 'change',
    },
  ],
  fodderbrand: [
    {
      required: true,
      message: '饲料品牌不能为空',
      trigger: 'change',
    },
  ],
  fodderName: [
    {

      required: true,
      message: '饲养负责人不能为空',
      trigger: 'change',
    },
  ],
  columnTime: [
    {
      required: true,
      message: '出栏日期不能为空',
      trigger: 'change',
    },
  ],
})

const ruless = reactive({
  
  farm: [
    {

      required: true,
      message: '养殖场不能为空',
      trigger: 'change',
    },
  ],
  farmName: [
    {
      required: true,
      message: '负责人不能为空',
      trigger: 'change',
    },
  ],
  framnum: [
    {
      required: true,
      message: '存栏数量不能为空',
      trigger: 'change',
    },
  ],


})


const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {

  var proDuctionBasicid=localStorage.getItem('Details');
  if (valid) {

      

    axios.post('https://localhost:7116/api/FarmingController1/FramUpdate',{
      varietyName: form.varietyName,
  breedcome: form.breedcome,
  breedDay: form.breedDay,
  fodderbrand: form.fodderbrand,
  fodderName: form.fodderName,
  columnTime: form.columnTime,
  proDuctionBasicid: Number(proDuctionBasicid)
}


    ).then(res=>{
      if(res.data.code==0)
    {
        ElMessage.success("添加成功");
        router.push('/Culturehtml')
    }

    })
    dialogFormVisible.value=false;

  } else {
    console.log('error submit!', fields)
  }
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dialogFormVisible.value=false;
dialogFormVisibles.value=false;
}
const updateorAdd=(()=>{

  dialogFormVisible.value=true;

})
const ProDction=(()=>{
  dialogFormVisibles.value=true;
})


const submitForms = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
  var proDuctionBasicid=localStorage.getItem('Details');
  if (valid) {
    axios.post('https://localhost:7116/api/FarmingController1/firmAdd',{

          farm: from_.farm,
          farmName: from_.farmName,
          framnum: from_.framnum,
          proDuctionBasicid: Number(proDuctionBasicid)

          }).then(res=>{
          if(res.data.code==0)
          { 
            ElMessage.success('设置成功')
            breedhtmls()
          }
          dialogFormVisible.value=false;
          })
  } else {
    console.log('error submit!', fields)
  }
})
}



const AddThey=(()=>
{

from_.get=1;

})

const VinoneAdd=(()=>{
var proDuctionBasicid=localStorage.getItem('Details');

  axios.post('https://localhost:7116/api/FarmingController1/VaccioneAdd',{

    proDuctionBasicid: Number(proDuctionBasicid),
  vaccineMess: {
    vaccioneMessid: 0,
    rearDay: from_.rearDay,
  healThcareMode: from_.healThcareMode,
    healthcareMethod:from_.healthcareMethod,
    proDuctionBasicid: Number(proDuctionBasicid)
  }

  }).then(res=>{

    if(res.data.code==0){
        ElMessage.success('新增成功');
        breedhtmls()
    }

  })

})

const GETimages=(()=>{

  dialogFormVisibless.value=true;

})


const handleAvatarSuccess = (url:any) => {
form.iamges="https://localhost:7116"+url
}

const beforeAvatarUpload = (rawFile:any) => {
  if (rawFile.type !== 'image/jpeg'&&
    rawFile.type !== 'image/jpg'&&
    rawFile.type !== 'image/png'
  ) {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const getLeadingCommentRanges=(()=>{


var proDuctionid=localStorage.getItem('Details')
axios.post('https://localhost:7116/api/FarmingController1/Handleopple',{ 
  iamges:form.iamges,
proDuctionBasicid: Number(proDuctionid)
}).then(res=>{


  console.log(res.data.data,'22222222')
  if(res.data.data==1)
{
  ElMessage.success('添加成功')
  dialogFormVisibless.value=false;
  breedhtmls()
}
if(res.data.data==-7)
{
  
 ElMessage.error('最多只能添加6条')
}

})


})









const GETimagest=(()=>{
  dialogFormVisibleone.value=true;
})






const getLeadingCommentONe=(()=>{


var proDuctionid=localStorage.getItem('Details')
axios.post('https://localhost:7116/api/FarmingController1/FarmHandle',{ 
  imgess:form.iamges,
proDuctionBasicid: Number(proDuctionid)
}).then(res=>{


  console.log(res.data.data,'22222222')
  if(res.data.data==1)
{
  ElMessage.success('添加成功')
  dialogFormVisibleone.value=false;
  breedhtmls()
}
if(res.data.data==-7)
{
  
 ElMessage.error('最多只能添加6条')
}
})
})

const deel=((imagest:any,ProductionImagesid:number)=>{


var ProductionImagesids=localStorage.getItem('Details');

axios.post('https://localhost:7116/api/SourceController1/Deel',{
  ProDtctionid:Number(ProductionImagesids),
  images:imagest
}).then(res=>{
  if(res.data.code==0)
{
  ElMessage.success('删除成功');
  breedhtmls()
}

})


})



</script>

<style scoped>

.images{

top: 0px;
width: 20px;
height: 20px;
float: left;
left: 150px;
z-index: 2;
position: relative;
cursor: pointer;
}
.buttonss{
float: left;
z-index: 1;
border: none;
}
</style>
